<template>
  <div class="manage">
    <el-card class="box-card1">
      <p style="font-weight:800">
        以下是其他公司提交的人员申诉记录，请确认核实。如果确定是本公司员工，点击“忽略”；如果不在本公司任职，请点击“删除”。
      </p>
    </el-card>
    <el-card class="box-card" style="margin-top:15px">
      <div slot="header" class="clearfix">
        <div style="display: flex;justify-content: right;align-items: center;">
          <el-button size="small" type="success" @click="loseClick">忽略</el-button>
          <el-button size="small" type="danger" @click="deleteClick">删除</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{
      fontWeight:800}" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" :selectable="selectable">
        </el-table-column>
        <el-table-column prop="realName" label="姓名">
        </el-table-column>
        <el-table-column prop="identityCard" label="身份证">
        </el-table-column>
        <el-table-column label="当前状态">
          <template slot-scope="scope">
            {{resultArr[scope.row.result]}}
          </template>
        </el-table-column>
        <el-table-column prop="orgName" label="单位名称">
        </el-table-column>
        <!-- <el-table-column prop="userName" label="申诉方DT号">
        </el-table-column> -->
        <el-table-column prop="phonenumber" label="联系电话">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pagination.pageNum"
        :page-size="pagination.pageSize" :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getselectResWorkerAppealPage, notDeleteWorkerAppeal, deleteWorkerAppeal } from '@/api/people'
export default {
  data () {
    return {
      resultArr: {
        0: '不同意',
        1: '同意',
        2: '系统处理',
        3: '等待处理',
        null: '等待处理'
      },
      multipleSelection: [],//选择的数据
      pagination: {
        pageTotal: 0,
        pageSize: 10,
        pageNum: 1,
      },
      tableData: []
    }
  },
  mounted () {
    this.gettableList()
  },
  methods: {
    selectable (row, index) {
      if (row.result == '3' || row.result == null) {
        return true
      }
    },
    gettableList () {
      const query = {
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.pageNum,
      }
      getselectResWorkerAppealPage(query).then(res => {
        if (res.data.code == '200') {
          this.pagination.pageTotal = res.data.data.total
          this.tableData = res.data.data.list
        }
      })
    },
    handleSizeChange (val) {
      this.pagination.pageNum = 1
      this.pagination.pageSize = val
      this.gettableList ()
    },
    handleCurrentChange (val) {
      this.pagination.pageNum = val
      this.gettableList ()
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.gettableList ()
    },
    // 忽略操作
    loseClick () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认忽略选中的数据项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.id
          })
          const params = {
            ids: query
          }
          notDeleteWorkerAppeal(params).then(res => {
            if (res.data.code == '200') {
              this.gettableList()
              this.$message({
                type: 'success',
                message: '忽略成功!'
              })
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消忽略'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }
    },
    // 删除操作
    deleteClick () {
      if (this.multipleSelection.length > 0) {
        this.$confirm('是否确认删除选中的数据项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let query = this.multipleSelection.map((item) => {
            return item.id
          })
          const params = {
            ids: query
          }
          deleteWorkerAppeal(params).then(res => {
            if (res.data.code == '200') {
              this.gettableList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message({
          type: 'info',
          message: '请选择电梯'
        })
      }
    }
  }
}

</script>
<style lang="less" scoped>
::v-deep .el-form-item__label {
  font-weight: bold;
}
.manage {
  .el-pagination {
    margin-top: 2vh;
    text-align: right;
  }
}
</style>
